import styles from './styles.module.css'
import logo from "../../assets/react.svg";
import {LogoutOutlined} from "@ant-design/icons";
import {useSelector} from "react-redux";
import {RootState} from "../../store/inedx.ts";
import {useNavigate} from "react-router-dom";
import {useEffect} from "react";

/**
 * 主页
 */
function Home() {
    const navigate = useNavigate();
    const {nameSpaceId, nameSpaceName} = useSelector((state: RootState) => state.app);

    const goTo = (path:string) => {
        navigate(path);
    }

    useEffect(() => {
        if (!nameSpaceId) {
            navigate('/namespace',{ replace: true });   // 没有选择命名空间需要回去选择
        }
    }, [nameSpaceId])

    return (<>
        <div className={styles.root}>
            <div className={styles.header}>
                <div className={styles.headerLogo}>
                    <div>
                        <img src={logo} alt={'logo'} style={{
                            width: '60px',
                            height: '60px',
                            marginRight: '10px'
                        }}/>
                    </div>
                    <div>
                        <b style={{fontSize: '20px'}}>游戏接入平台</b>
                        <br/>
                        <span style={{fontSize: '12px'}}>提供登录、支付、数据统计功能</span>
                    </div>
                </div>
                <div onClick={() => navigate('/namespace',{ replace: true })} style={{cursor: 'pointer'}}>
                    <span style={{fontSize: '18px', textTransform: 'capitalize'}}>{nameSpaceName}</span>
                    <LogoutOutlined style={{marginLeft: '5px'}}/>
                </div>
            </div>

            <div className={styles.body}>
                <div className={styles.container}>
                    <div onClick={()=>goTo('/games')}>游戏</div>
                    <div onClick={()=>goTo('/channels')}>渠道</div>
                    <div onClick={()=>goTo('/products')}>产品</div>
                    <div onClick={()=>goTo('/users')}>用户</div>
                    <div onClick={()=>goTo('/orders')}>订单</div>
                    <div onClick={()=>goTo('/data')}>数据</div>
                    <div onClick={()=>goTo('/dashboard')}>看板</div>
                </div>
            </div>
        </div>
    </>)
}

export default Home